<template>
  <div class="btn-row">
    <div 
      v-for="(item, index) in color"
      @click.stop="chooseByColor(index, item.name)"
      class="btn-item button-unselected"
      :class="classObj(item.color, item.selected)"
      :key="index"
      >
      {{item.name}}
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  data() {
    return {
      color: [
        {name: '红', color: 'red', selected: false},
        {name:'绿', color: 'green', selected: false}, 
        {name: '蓝', color: 'blue', selected: false}
      ],
    }
  },
  methods: {
    chooseByColor(index, condition) {
      this.color.forEach((item, i) => {
        if (index !== i) {
          item.selected = false
        }
      })
      this.color[index].selected = !this.color[index].selected
      // this.changeState(index, selected)
      this.$emit('click', this.color[index].selected ? condition : '')
    },
    changeState(condition, selected) {
      let numbers = this.clonedItem.numbers
      if (!selected) {
        switch(condition) {
          case 0:
            numbers.forEach(number => {
              number.selected = number.color == 'red' ? true : false
            })
          break;
          case 1:
            numbers.forEach(number => {
              number.selected = number.color == 'green' ? true : false
            })
          break;
          case 2:
            numbers.forEach(number => {
              number.selected = number.color == 'blue' ? true : false
            })
          break;
        }
      } else {
        numbers.forEach(number => {
          number.selected = false
        })
      }
      this.$emit('click', this.clonedItem)
    },
    clearState() {
      this.color.forEach((item, i) => {
        item.selected = false
      })
    },
    classObj(color, selected) {
      return {
        active: selected,
        [color]: color
      }
    }
  },
  computed:{
    ...mapGetters('lottery', ['getCurrentLotteryState']),
    clonedItem() {
      return JSON.parse(JSON.stringify(this.getCurrentLotteryState[0]))
    }
  },
}
</script>

<style lang="stylus" scoped>
  @import '~@/assets/styles/variables.styl'
  .btn-row 
    display flex
    flex-wrap wrap
    justify-content space-between
    .btn-item 
      width calc((100% - 30px) / 3)
      height 40px 
      line-height 40px 
      text-align center
      margin 5px 0
      &.red 
        color $color-ball-red 
        &.active 
          color #fff 
          background $color-ball-red
      &.green 
        color $color-ball-green
        &.active 
          color #fff 
          background $color-ball-green
      &.blue 
        color $color-ball-blue
        &.active 
          color #fff 
          background $color-ball-blue
      
</style>